.public-class {
  padding-left: 20px;
  height: 710px;
  color: #fff;
  background: #242948;

  .public-class-contaienr {
    background: #fff;
    width: 760px;
    height: 640px;
    .public-class-content {
      width: 760px;
      height: 530px;
      margin-top: 24px;
      padding: 20px;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .public-class-item {
        width: 234px;
        height: 230px;
        margin-bottom: 30px;
        .img-wrap {
          position: relative;
          width: 234px;
          height: 156px;
          img {
            display: block;
            width: 100%;
            height: 100%;
          }
          span {
            position: absolute;
            top: 0;
            right: 0;
            display: block;
            width: 50px;
            height: 26px;
            line-height: 26px;
            text-align: center;
            font-size: 14px;
            color: #fff;
            &.live-icon {
              background: url(../../../../images/student/live-icon.png) no-repeat;
              background-size: cover;
            }
            &.recorded-icon {
              background: url(../../../../images/student/recorded-icon.png) no-repeat;
              background-size: cover;
            }
          }
        }
        >p {
          font-size: 16px;
          color: #333;
          line-height: 30px;
          height: 45px;
          margin: 0;
        }
        >span {
          display: block;
          width: 120px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          color: #fff;
          font-size: 14px;
          border-radius: 16px;
          background: #43a0ff;
          margin: 0 auto;
          cursor: pointer;
          &.status1 {
            background: #43a0ff;
          }
          &.status2 {
            background: #f7be39;
          }
          &.status3 {
            background: #00c4a0;
          }
          &.status4 {
            background: #ccc;
          }
        }
      }
    }
  }
  
}
